<script setup>
import { useRouter } from "vue-router"
import { useUserStore } from "@/stores/user"
import { LogoutApi } from "@/apis/user";

const store = useUserStore()
const user = store.user
const isLogin = store.isLogin
const router = useRouter()

function navigationTo(e) {
  router.push({
    name: e
  })
}

function logout() {
  LogoutApi()
    .then(() => {
      store.userLogout()
      router.replace({
        name: 'login'
      })
    })
}
</script>
<template>
  <main style="margin-top: 8px;">
    <!-- 登录的情况 -->
    <template v-if="isLogin">
      <t-cell-group theme="card">
        <t-cell :title="user.profile.name" hover arrow :bordered="false">
          <template #image>
            <t-avatar class="avatar-example" :image="user.profile.avatar" shape="round"></t-avatar>
          </template>
          <template #description>
            <t-tag v-if="user.group.id === 1" style="margin-right: 8px;" theme="warning" size="small">管理员
            </t-tag>
            <t-tag v-else style="margin-right: 8px;" theme="success" size="small">{{
              user.group.name
            }}
            </t-tag>
            <div>数控制造，制造未来！</div>
          </template>
        </t-cell>
      </t-cell-group>

      <div class="divider-block"></div>

      <t-cell-group theme="card" style="margin-top: 8px;">
        <t-cell title="账号信息" hover arrow @click="navigationTo('userInfo')">
          <template #image>
            <t-icon name="user" size="24px" style="color: #0052d9;"></t-icon>
          </template>
        </t-cell>
        <t-cell title="修改手机号码" hover arrow @click="navigationTo('userResetPhone')">
          <template #image>
            <t-icon name="mobile" size="24px" style="color: #0052d9;"></t-icon>
          </template>
        </t-cell>
        <t-cell title="修改密码" hover arrow :bordered="false" @click="navigationTo('userResetPwd')">
          <template #image>
            <t-icon name="lock-on" size="24px" style="color: #0052d9;"></t-icon>
          </template>
        </t-cell>
      </t-cell-group>

      <div class="divider-block"></div>

      <t-cell-group theme="card" style="margin-top: 8px;">
        <t-cell title="设置" hover arrow>
          <template #image>
            <t-icon name="setting" size="24px" style="color: #0052d9;"></t-icon>
          </template>
        </t-cell>
        <t-cell title="退出登录" hover arrow :bordered="false" @click="logout">
          <template #image>
            <t-icon name="logout" size="24px" style="color: #0052d9;"></t-icon>
          </template>
        </t-cell>
      </t-cell-group>
    </template>

    <template v-else>
      <t-cell-group theme="card">
        <t-cell title="点击登录" hover arrow :bordered="false">
          <template #image>
            <t-icon name="user" size="24px" style="color: #0052d9;"></t-icon>
          </template>
          <template #description>
            <!-- <t-tag style="margin-right: 8px;" theme="primary" size="small">NA</t-tag> -->
            <text>事实证明，这是需要登录才能够使用的.</text>
          </template>
        </t-cell>
      </t-cell-group>
    </template>
  </main>
</template>